<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ggk{
            width: 400px;
            height: 100px;
            position:relative
        }
        .jp{
            width: 400px;
            height: 100px;
            position: absolute;
            left:0;
            top:0;
            text-align: center;
            color:"deeppink";
            font-size:50px;
            line-height:100px
        }
        #canvas{
            width: 400px;
            height: 100px;
            position: absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
    <div class="ggk">
        <div class="jp">谢谢惠顾</div>
        <canvas id="canvas" width="400" height="100"></canvas>
    </div>
    <script>
      var canvas=document.querySelector("#canvas")
      var ggkDom=document.querySelector(".ggk")
      var jpDom=document.querySelector(".jp")
      var ctx=canvas.getContext("2d")
      ctx.fillStyle="darkgray"
      ctx.fillRect(0,0,400,100)
      ctx.font="20px 微软雅黑"
      ctx.fillStyle="#fff"
      ctx.fillText("刮刮卡",180,50)

      var isDraw=false//设置isDraw=true记为允许绘制
      
      canvas.onmousedown=function(){
        isDraw=true
        console.log(isDraw);
        
      }
    //移动的时候绘制圆形,将源图像内的目标内容给清除掉
      canvas.onmousemove=function(e){
        if(isDraw){
           var x=e.pageX-ggkDom.offsetLeft
           var y=e.pageY-ggkDom.offsetTop
           ctx.globalCompositeOperation="destination-out"
           console.log(x,y);
           ctx.arc(x,y,20,0,2*Math.PI)
           ctx.fill()
        }
      }
      //鼠标离开事件
      canvas.onmouseup=function(){
        isDraw=false
        console.log(isDraw);
      }

      var arr=[
          {content:"一等奖:IphoneXs",p:0.1},
          {content:"二等奖:IphoneXs",p:0.2},
          {content:"三等奖:IphoneXs",p:0.3},
          {content:"谢谢惠顾",p:0.4},
         ]
       var randomNum=Math.random()
       if(randomNum<arr[0].p){
        jpDom.innerHTML=arr[0].content
       }else if(randomNum<arr[1].p+arr[0].p){
        jpDom.innerHTML=arr[1].content
       }else if(randomNum<arr[2].p+arr[1].p+arr[0].p){
        jpDom.innerHTML=arr[2].content
       }else{
        jpDom.innerHTML=arr[3].content
       }
    </script>
</body>
</html>